<template>
  <div style="margin-bottom: 10px;">
    <el-dropdown trigger="click" class="info">
      <el-button type="primary">画布</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item title="画布背景色">
            <el-color-picker @change="changeColor" v-model="state.graphBackgroundColor" show-alpha/>
          </el-dropdown-item>
          <el-dropdown-item title="画布网格">
            <el-color-picker @change="changeColor" v-model="state.graphBackgroundColor" show-alpha/>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown trigger="click" style="margin-left: 20px;">
      <el-button type="primary">节点</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item title="新增节点" @click="addNode">
            新增节点
          </el-dropdown-item>
          <el-dropdown-item title="画布网格">
            <el-color-picker @change="changeColor" v-model="state.graphBackgroundColor" show-alpha/>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button type="primary" style="margin-left: 20px;" @click="save">添加主题</el-button>
    <el-button type="primary" style="margin-left: 20px;" @click="save">添加子主题</el-button>
    <el-button type="primary" style="margin-left: 20px;" @click="save">保存</el-button>
  </div>
  <div id="container" class="height100"></div>
</template>

<script>
import { Graph, Shape } from '@antv/x6'
import { data } from '@/views/test'
import { onMounted, reactive } from 'vue'

export default {
  name: 'brainMap',
  setup () {
    const state = reactive({
      // 画布
      graph: null,
      graphBackgroundColor: '#409EFF'
    })
    const addNode = () => {
      const rect = new Shape.Rect({
        x: 300,
        y: 250,
        width: 80,
        height: 40,
        attrs: {
          body: {
            fill: '#2ECC71', // 背景颜色
            stroke: '#000' // 边框颜色
          },
          label: {
            text: 'rect', // 文本
            fill: '#333', // 文字颜色
            fontSize: 13 // 文字大小
          }
        }
      })
      const edge = new Shape.Edge({
        source: 'node2',
        target: rect
      })
      state.graph.addNode(rect)
      state.graph.addEdge(edge)
    }
    const init = () => {
      state.graph = new Graph({
        panning: {
          enabled: true,
          modifiers: 'ctrl'
        },
        grid: true,
        container: document.getElementById('container'),
        width: '100%',
        height: '100%',
        background: {
          // 设置画布背景颜色
          color: state.graphBackgroundColor
        }
      })
      state.graph.fromJSON(data)
      // graph.zoom(-0.5)
      state.graph.translate(80, 40)
      state.graph.on('cell:dblclick', ({
        cell,
        e
      }) => {
        const isNode = cell.isNode()
        const name = cell.isNode() ? 'node-editor' : 'edge-editor'
        cell.removeTool(name)
        cell.addTools({
          name,
          args: {
            event: e,
            attrs: {
              backgroundColor: isNode ? '#EFF4FF' : '#FFF'
            }
          }
        })
      })
    }
    // 改变画布背景色
    const changeColor = () => {
      state.graph.drawBackground({
        color: state.graphBackgroundColor
      })
    }
    const save = () => {
      const content = state.graph.toJSON()
      console.log(content)
    }
    onMounted(() => {
      init()
    })
    return {
      addNode,
      save,
      changeColor,
      state
    }
  }
}
</script>

<style scoped>

</style>
